﻿<!DOCTYPE html>
<!--用户部门职务-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>

    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>

    <!--<style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
    <style>
        /*说明：
         由于mystyle.css中162行.el-form-item__content {line-height: normal!important;}导致的
         index.css中.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label{    line-height: 28px;}失效
         但出于无法修改样式表的情况，所以在该页面添加以下样式，以保证页面内标题和内容不偏离
        */
        .el-form-item--mini .el-form-item__content,
        .el-form-item--mini .el-form-item__label {
            line-height: 28px !important;
        }

        .el-dialog__body {
            height: 200px;
        }
    </style>
    <style>

        .el-input__suffix {
            /* z-index: 9; */
        }

        .cell {
            text-align: center;
        }
    </style>
    <style>
        /*页面内弹窗导致function.js的响应式样式失效，懒得调了，单独写个死样式控制select的样式，勉强能用*/
        .input-with-select .el-input-group__append {
            background-color: #fff;
        }

        .el-input__inner {
            width: 0px;
            padding: 0px;
            margin: 0px;
            border-right: none;
        }

        .el-input--suffix .el-input__inner {
            width: 150px;
            padding-left: 30px;
        }

        .el-input-group__append {
            width: 150px;
        }
    </style>-->
    <style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
    <style>
        /*页面内弹窗导致function.js的响应式样式失效，懒得调了，单独写个死样式控制select的样式，勉强能用*/
        .input-with-select .el-input-group__append {
            background-color: #fff;
        }

        .el-input__inner {
            width: 0px;
            padding: 0px;
            margin: 0px;
            border-right: none;
        }

        .el-input--suffix .el-input__inner {
            width: 180px;
            padding-left: 10px;
        }

        .el-input-group__append {
            width: 100px;
        }
    </style>
    <script>
        $(window).resize(function () {
            //   var p = 200 / 1440;
            //   var pw = $(this).width();
            //   var sw = pw * p;
            //   console.log($(".el-input--suffix").html())
            ////   $(".el-input--suffix").find("input[class=el-input__inner]").width(sw);
            //   $("div.el-input--suffix .el-input__inner").width(sw);
            //   $(".el-input-group__append").width(sw);
        });
    </script>
</head>
<body>

    <div id="app" v-cloak>
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" size="mini" label-position="right">
            <!--<el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{"部门："}}
                                </template>
                                <treeselect v-model="departmentId"
                                            :options="department"
                                            :flat="true"
                                            :show-count="true"
                                            slot="suffix"
                                            style="line-height: 28px;width:180px"
                                            placeholder="请选择" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">

                </el-col>
            </el-row>-->
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item :label="user.loginName+mark.m">
                            {{Form.loginName}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item :label="'姓名'+mark.m">
                                {{Form.userName}}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>
            </el-row>
            <el-row style="margin-bottom:10px;">
                <el-col :span="24">
                    <el-button type="primary" @click="showDialog('tj')">{{col.btnAdd+'新岗位'}}</el-button>
                    <el-button type="danger" @click="onMyDelete">{{col.btnDelete}}</el-button>
                </el-col>
            </el-row>

            <el-table ref="table" :data="Form.dutyList" border
                      @selection-change="handleSelectionChange" row-style="height:10px" style="width: 100%;margin:0 auto;margin-bottom:20px;">
                <el-table-column type="selection"
                                 style="padding-top: 0px;padding-bottom: 0px;"
                                 align="center"
                                 width="55"
                                 :reserve-selection="true">
                </el-table-column>
                <el-table-column type="index" :label="'序号'" :index="indexMethod" width="50" show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="departmentName" :label="'部门'">
                </el-table-column>
                <el-table-column prop="dutyName" :label="'岗位'">
                </el-table-column>
                <!--<el-table-column prop="state" :label="'状态'" width="100">
                </el-table-column>-->
                <el-table-column width="60" prop="update" :label="col.btnUpdate" fixed="right">
                    <template slot-scope="scope">
                        <button type="button" class="elst-bt-xg" @click=showDialog('xg',scope.row.id)>
                            <i class="el-icon-edit"></i>
                        </button>
                    </template>
                </el-table-column>
            </el-table>



            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <!-- <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button> -->
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>




            <el-dialog title="添加新职务" :visible.sync="ListItem.dialogVisible" @close='closeDialog' top="30vh">
                <el-row>
                    <el-col :span="11">
                        <el-input class="input-with-select" size="mini">
                            <template slot="prepend">
                                <div> {{'选择部门'+mark.m}}</div>
                            </template>
                            
                                <treeselect v-model="departmentId"
                                            :options="department"
                                            :flat="true"
                                            :show-count="true"
                                            slot="append"
                                            style="line-height: 28px;width:180px;"
                                            placeholder="请选择部门" />

                            
                        </el-input>
                        
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-col>
                            <el-input class="input-with-select" size="mini">
                                <template slot="prepend">
                                    <div> {{'选择岗位'+mark.m}}</div>
                                </template>
                                <el-select @visible-change="visibleChange" v-model="dutyId" slot="append" placeholder="请选择">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in duties" :label="item.sysDuty.name" :value="item.sysDuty.id"></el-option>
                                </el-select>
                            </el-input>
                        </el-col>
                    </el-col>
                </el-row>
                
                    

                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitDialog('ruleForm')">{{col.btnSubmit}}</el-button>
                        <el-button type="primary" @click="ListItem.dialogVisible = false">{{col.btnBack}}</el-button>
                    </div>
                    <!--<el-form size="mini" label-position="right">
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{'选择部门'+mark.m}}
                                </template>

                                <treeselect v-model="departmentId"
                                            :options="department"
                                            :flat="true"
                                            slot="suffix"
                                            placeholder="请选择"
                                            style="line-height: 28px;" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" offset="2">
                    <el-col>
                        <el-input class="input-with-select" size="mini">
                            <template slot="prepend">
                                <div> {{'选择部门'+mark.m}}</div>
                            </template>
                            <el-select @visible-change="visibleChange" v-model="dutyId" slot="append" placeholder="请选择">
                                <el-option label="请选择" value=""></el-option>
                                <el-option v-for="item in duties" :label="item.sysDuty.name" :value="item.sysDuty.id"></el-option>
                            </el-select>
                        </el-input>
                    </el-col>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitDialog('ruleForm')">{{col.btnSubmit}}</el-button>
            <el-button type="primary" @click="ListItem.dialogVisible = false">{{col.btnBack}}</el-button>
        </div>-->
            </el-dialog>
        </el-form>

    </div>
    <script>

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        };

    </script>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        app = new Vue({
            el: '#app',
            data: {
                //父业传参
                id: '',
                test: null,
                testform: {},
                name:null,
                //表格数据id
                inputId: '',
                ListItem: ListItem,
                //部门数据集
                department: [],
                //职务数据集
                duties: [],
                //部门model
                departmentId: null,
                //职务model
                dutyId: null,
                //选择部门后的信息对象
                deparmentObject: null,
                //业务表单内容
                Form: {
                    id: '',
                },
                //表单验证
                rules: {

                }
            },
            watch: {
                //下拉树监控
                departmentId(val, oldval) {
                    //初始化职务选项
                    //this.dutyId = null;
                    //获取部门信息（含中间表及职务数据）
                    this.getDuty(val);
                    //绑定职务下拉框
                    this.duties = this.deparmentObject.sysDepartmentDuties;
                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //表格序号连续化(完成)
                indexMethod: function (index) { return index + 1; },
                //打开弹窗(完成)
                showDialog: function (type, id) {
                    if (type == 'tj') {
                        //清空选中项
                        this.departmentId = null
                        this.dutyId = null

                    }
                    else {
                        var _depid = '';
                        var _dutyid = ''
                        //提交生效前页面表格的数据
                        var dutyList = this.Form.dutyList;
                        if (dutyList) {
                            dutyList.forEach(function (v) {
                                if (v.id == id) {
                                    _depid = v.departmentId;
                                    _dutyid = v.dutyId;
                                    //此处赋值默认值需同步联动方法，否则无法给二级菜单赋初始值
                                    //this.departmentId = v.departmentId
                                    //this.dutyId = v.dutyId
                                    //console.log("ohoh" + this.departmentId);
                                    
                                }
                            })
                        }
                        this.departmentId = _depid;
                        this.dutyId = _dutyid;
                        console.log("OH" + this.dutyId);
                        
                    }

                    this.ListItem.dialogVisible = true;
                    this.inputId = id;
                },
                //关闭弹窗
                closeDialog: function () { },
                //提交弹窗
                submitDialog: function () {
                    var mythis = this;


                    //提交生效前页面表格的数据
                    var dutyList = this.Form.dutyList;
                    if (!dutyList)
                        dutyList = []
                    //职务名称
                    var dutyName = '';
                    //部门职务中间表id
                    var departmentDutyId = '';
                    //部门对象（含中间表及职务数据）
                    var departmentObj = this.deparmentObject;
                    //判断是否选中部门
                    if (this.departmentId) {
                        //获取部门信息（含中间表及职务数据）促进页面与数据库数据同步
                        this.getDuty(this.departmentId);
                    }
                    console.log('departmentObj', departmentObj)
                    //判断是否选中职务 且 部门对象中的中间表数据是否存在（其实是重复判断）
                    if (this.dutyId && departmentObj.sysDepartmentDuties.length) {
                        //遍历中间表数据
                        var ddList = departmentObj.sysDepartmentDuties;

                        ddList.forEach(function (v, i) {
                            //判断中间表中的职务id与选中的职务id
                            if (v.sysDutyID == mythis.dutyId) {
                                //赋值职务名称
                                dutyName = v.sysDuty.name;
                                //赋值中间表id（即返回的结果键）
                                departmentDutyId = v.id;
                            }
                        })
                    }

                    //判断是否选中职务
                    if (this.dutyId) {
                        //修改
                        if (this.inputId) {
                            //遍历form数据
                            dutyList.forEach(function (v, i) {
                                //判断form数据与要修改的中间表id
                                if (v.id == mythis.inputId) {
                                    //替换改条数据内容
                                    v.departmentId = departmentObj.id;
                                    v.departmentName = departmentObj.name;
                                    v.dutyId = mythis.dutyId;
                                    v.dutyName = dutyName;
                                    v.departDutyId = departmentDutyId
                                    //v.id = departmentDutyId;
                                }
                            })
                        }
                        //新增
                        else {
                            var insertRecord = true;
                            dutyList.forEach(function (v, i) {
                                if (v.departDutyId == departmentDutyId) {
                                    showMessage("用户已经拥有该职位", "error");
                                    insertRecord = false;
                                }
                                else {
                                    
                                       
                                }
                               
                            });

                            if (insertRecord) {
                                dutyList.push({
                                        departmentId: this.departmentId,
                                        departmentName: departmentObj.name,
                                        dutyId: this.dutyId,
                                        dutyName: dutyName,
                                        departDutyId: departmentDutyId,
                                        id: guid()
                                    })
                            }
                             

                            
                        }
                    }

                    this.ListItem.dialogVisible = false;

                },
                //列表选择触发(完成)
                handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                //删除方法(完成)
                onMyDelete: function () {
                    var delIds = [];
                    for (var i = 0; i < this.ListItem.tableMultipleSelection.length; i++) {
                        var item = this.ListItem.tableMultipleSelection[i];
                        delIds.push(item.id);
                    }
                    for (var i = 0; i < this.Form.dutyList.length; i++) {
                        var record = this.Form.dutyList[i];
                        var recordId = record.id;

                        if (delIds.indexOf(recordId) != -1) {

                            this.Form.dutyList.splice(i, 1);
                            i--;
                        }
                    }
                },
                GetPageData: function (val) {
                    //getData();
                },
                //获取数据(完成)
                getData: function () { getData(this, '/api/User/GetUserDuty?id=' + this.id); },
                //初始化部门下拉树(完成)
                getDepartmentData: function () {
                    var mythis = this;
                    console.log("go");
                    var factoryid = null
                    myAjax("get", mythis, '/api/User/Get?id=' + mythis.id, null, function (response) {
                        factoryid = response.data.sysUserInfor.workCompany;

                    }, false);
                    myAjax("post", this, '/api/SysDepartment/GetList', { model: { Name: '', Code: '', CreateFactory: factoryid }, offset: 0, limit: 10 }, function (response) {
                        mythis.department = menuHelper(response.data.pageData, guidEmpty)
                    }, false);
                },
                //联动职务下拉框(完成)
                getDuty: function (pid) {
                    var mythis = this;
                    myAjax("get", mythis, '/api/SysDepartment/Get?id=' + pid, null, function (response) {
                        mythis.deparmentObject = response.data;

                    }, false);
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    var dutyList = this.Form.dutyList;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            //提交接口参数1：用户id
                            var UserId = mythis.id;
                            //提交接口参数2：部门职务中间表id集
                            var DepartmenDutytId = [];
                            for (var i = 0; i < dutyList.length; i++) {
                                console.log('dutyList[i]', dutyList[i])
                                DepartmenDutytId.push(dutyList[i].departDutyId)
                            }
                            //提交接口的数据
                            console.log(UserId, DepartmenDutytId)

                            //调用接口
                            myAjax("post", mythis, '/api/User/SaveUserDuty', { UserId: UserId, DepartmenDutytId: DepartmenDutytId }, function (response) {
                                showMessage(msg.OperatingOk, 'success');
                                parent.app.ListItem.dialogVisible = false;
                            });
                        } else {
                            //验证失败
                            return false;
                        }
                    });

                },
            },
            mounted: function () {
                this.id = getUrlParam("id");
                //this.id = '19A701E9-B5CF-4687-2755-08D710C8F638'
                console.log(this.id);
                this.Form.id = this.id;
                //初始化页面数据
                this.getData();
                console.log('form', this.Form)
                //初始化部门下拉树数据
                this.getDepartmentData();
                
                

            }
        });
        //下拉树数据格式化
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>

</body>

</html>